<!--
 * @Description: 图表组件
 * 示例：<tw-money v-model="amount"></tw-money>
 * @Author: DHL
 * @Date: 2022-10-10 13:23:43
 * @LastEditors: DHL
 * @LastEditTime: 2024-02-07 09:40:54
-->
<template>
  <div :id="domId" :style="chartStyle"></div>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch, markRaw } from 'vue'
  import { buildUUID } from '@/utils/uuid'
  import * as echarts from 'echarts'

  /**
   * 组件ID
   */
  const domId = ref(`tw_echarts_${buildUUID()}`)

  /**
   * 图表实例
   */
  const twEchartInstance: any = ref(null)

  /**
   * 图表样式
   */
  const chartStyle = ref({})

  //////////////////////////////////////////////////
  // Props
  //////////////////////////////////////////////////

  interface Props {
    /**
     * 宽度
     */
    width: string

    /**
     * 高度
     */
    height: string
  }

  const props = withDefaults(defineProps<Props>(), {
    width: '',
    height: ''
  })

  watch(
    () => [props.width, props.height],
    (newValue) => {
      chartStyle.value = {
        width: newValue[0],
        height: newValue[1]
      }
    },
    {
      immediate: true
    }
  )

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////
  /**
   * 初始化
   * @param options
   */
  function build(options: any) {
    if (twEchartInstance.value == null) {
      const chartDom: HTMLElement = document.getElementById(domId.value) as HTMLElement
      twEchartInstance.value = markRaw(
        echarts.init(chartDom, null, {
          locale: 'ZH'
        })
      )
    }
    twEchartInstance.value.setOption(options)
  }

  //////////////////////////////////////////////////
  // 生命周期
  //////////////////////////////////////////////////
  onMounted(() => {})

  //////////////////////////////////////////////////
  // 暴露出去，父组件才可以调用到
  //////////////////////////////////////////////////
  defineExpose({
    build
  })
</script>

<style scoped lang="scss"></style>
